<!--
 * @Autor: Kadia
 * @Date: 2021-06-17 11:05:55
 * @LastEditors: Kadia
 * @Connect: nefukadia@foxmail.com
 * @LastEditTime: 2021-07-02 18:05:37
-->
<template>
    <div>
        <div class="topBar">
            <el-menu v-if="hasLogin" :default-active="active" @select="onSelect" mode="horizontal" background-color="#f8f8f8" active-text-color="#11b24e">
                <el-menu-item index="1"><i class="el-icon-s-home"></i>首页</el-menu-item>
                <el-menu-item index="2"><i class="el-icon-s-platform"></i>订单管理</el-menu-item>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-s-check"></i>我的
                    </template>
                    <el-menu-item index="3-1">设置</el-menu-item>
                    <el-menu-item index="3-2">退出登录</el-menu-item>
                </el-submenu>
            </el-menu>
            <el-button v-if="!hasLogin" icon="el-icon-user" plain round @click="onClickLogin">商家登录</el-button>
        </div>
        <div style="height:120px;"></div>
    </div>
</template>

<<script>
export default {
    props:{
        active:{
            type:String,
            default:"1"
        },
        hasLogin:{
            type:Boolean,
            default:false
        }
    },
    methods: {
        onSelect(index){
            const that=this;
            if(that.active==index)
                return ;
            if(index=='1'){
                that.$router.push({
                    name:'Index'
                });
            }else if(index=='2'){
                that.$router.push({
                    name:'Manage'
                });
            }else if(index=='3-1'){
                that.$router.push({
                    name:'Setting'
                });
            }else if(index=='3-2'){
                that.$cookies.remove('email');
                that.$cookies.remove('password');
                if(that.active=='1')
                    that.$router.go(0);
                else{
                    that.$router.push({
                        name:'Index'
                    });
                }
            }
        },
        onClickLogin(){
            const that=this;
            that.$router.push({
                name:'Login'
            });
        }
    },
};
</script>

<style scoped>
    .topBar{
        width:calc(100% - 20px);
        padding: 10px;
        background-color:#f8f8f8;
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2001;
  }
</style>